<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">
    <title></title>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/mui.min.js"></script>
    <script type="text/javascript" src="js/llqrcode.js"></script>
    <script type="text/javascript" src="js/webqr.js"></script>
	<script type="application/javascript">
		//jeff begin
		//扫码变量
		var scanningcode = "";
		//安卓端回传值监听
		document.addEventListener("message", function(e) {
			scanningcode = JSON.parse(e.data).result;
			$(".strong").text(scanningcode);
		});
		//jeff end
	</script>
</head>

<body class="page-check-out  swiper-no-swiping">
<div class="page-check-out-swiper swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide fast swiper-slide-1">
            <h2>快速结算模式</h2>
            <div class="custom-price-wrap">
                <div type="number " id="custom-price" value="" placeholder="消费金额"/>
            </div>
        </div>
        <div class="mykb-box">
            <ul class="num-key clearfix">
                <li class="num">1</li>
                <li class="num">2</li>
                <li class="num">3</li>
                <li class="func del"><img src="./img/backspace.png"></li>
                <li class="func sure">确定<br>支付</li>
                <li class="num">4</li>
                <li class="num">5</li>
                <li class="num">6</li>
                <li class="num">7</li>
                <li class="num">8</li>
                <li class="num">9</li>
                <li class="func jump"><img src="./img/jump1.png"></li>
                <li class="num">0</li>
                <li class="num">.</li>
            </ul>
        </div>
    </div>
    <div class="swiper-slide swiper-slide-1">
        <h2 class="style-2">
            <div class="set"></div>
            选菜结算模式
        </h2>
        <div class="top">
            <div class="count">
                总份数
                <span>X 0份</span>
            </div>
            <div class="cost">
                总金额<span>￥0.00</span>
            </div>
        </div>
        <div class="mid">
            <div class="mid-swiper swiper-container">
                <div class="swiper-wrapper">

                    <div class="swiper-slide">
                        <div class="center">
                            <div class="col-sm-4" cost="3">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>3.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="2">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>2.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="3">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>3.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="5">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>5.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="8">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>8.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="15">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>15.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="9">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>9.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="6">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>6.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="7">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>7.00</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="center">
                            <div class="col-sm-4" cost="3">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>3.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="2">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>2.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="3">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>3.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="5">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>5.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="8">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>8.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="15">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>15.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="9">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>9.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="6">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>6.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="7">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>7.00</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="center">
                            <div class="col-sm-4" cost="3">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>3.00</strong>
                                </div>
                            </div>

                            <div class="col-sm-4" cost="9">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>9.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="6">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>6.00</strong>
                                </div>
                            </div>
                            <div class="col-sm-4" cost="7">
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                    <div class="add">+</div>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>7.00</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="bottom">
            <ul>
                <li>
                    <a class="text jump2"><img src="img/jump2.png"></a>
                </li>
                <li>
                    <a class="mid-prv"><i class="fa fa-caret-left" aria-hidden="true"></i></a>
                </li>
                <li>
                    <a class="mid-next"><i class="fa fa-caret-right" aria-hidden="true"></i></a>
                </li>
                <li>
                    <a class="text sure2">确认</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="swiper-slide swiper-slide-1">
        <div style="display: none;">
            <div id="outdiv">
                <video id="v" autoplay=""></video>
            </div>
            <canvas id="qr-canvas" width="800" height="600" style="width: 800px; height: 600px;"></canvas>
        </div>
        <div class="half top-half">
            <div class="center">
                <img src="img/pay.png" class="pay-img">
                <div class="left">
                    <div class="strong">总金额</div>
                    <div class="small">总份数</div>
                </div>
                <div class="right">
                    <div class="strong">￥0.00</div>
                    <div class="small">X<span>0</span>份</div>
                </div>
                <p>出示微信支付宝<strong>付款二维码</strong><br>或刷卡支付</p>
            </div>
        </div>
        <div class="half">
            <div class="center">
                <div class="left">
                    <div class="strong">总金额</div>
                    <div class="small">总份数</div>
                </div>
                <div class="right">
                    <div class="strong">￥0.00</div>
                    <div class="small">X<span>0</span>份</div>
                </div>
                <div class="cancel">
                    取消
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="modal password" style="display: none;">
    <div class="modal-content">

        <input tyle="number" placeholder="密码">
        <button class="button-sure">确定</button>
        <button class="button-cancel">取消</button>
    </div>
</div>
<div class="modal set-modal" >
    <div class="modal-content">
        <input tyle="number" id="uuid" placeholder="设备ID" disabled="disabled">
        <input tyle="number" id="counter_number" placeholder="柜台号">
        <input tyle="number" id="terminal_number" placeholder="终端号">
        <input tyle="number" id="loop" placeholder="刷新间隔">
        <input tyle="text" id="host" placeholder="接口地址">
        <button class="button-sure">确定</button>
        <button class="button-cancel">取消</button>
    </div>
</div>
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>

<script type="text/javascript" src="js/mykb.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<!--<script type="text/javascript" src="js/qrcode.lib.min.js" ></script>
<script type="text/javascript" src="js/qrcode.js" ></script>-->
<script type="application/javascript">
    price = '0';
    count = '0';
    goods = {};
    serial = '';
    function isset(obj, k) {
        if ((typeof(obj) == "array" || typeof(obj) == "object") && typeof(k) != 'undefined') {
            return !(typeof(obj[k]) == "undefined");
        } else {
            return !(typeof(obj) == 'undefined');
        }
    }

    var add_goods = function (goods_id) {
        if (isset(goods, goods_id)) {
            goods[goods_id]++;
        } else {
            goods[goods_id] = 1;
        }
        console.log(goods);
    }

    var fun_click_goods = function () {
        $(".page-check-out .mid .col-sm-4 img").unbind().click(function () {
            var price1 = jQuery(this).parents(".col-sm-4").attr('cost');
            var goods_id = jQuery(this).parents(".col-sm-4").attr('goods_id');
            count = parseInt(count) + 1;
            price = parseFloat(price) + parseFloat(price1);
            add_goods(goods_id);
            jQuery(".count span").html("X " + count + "份");
            if (String(price).indexOf(".") > -1) {
                jQuery(".half .right .strong").html("￥" + price);
                jQuery(".cost span").html("￥" + price);
            } else {
                jQuery(".half .right .strong").html("￥" + price + ".00");
                jQuery(".cost span").html("￥" + price + ".00");

            }
            jQuery(".half .right .small span").html(count);
            check.slideTo(2, 100, false);
			//jeff begin
			//屏蔽
            //start(function(qrcode){app.pay(qrcode)});
			//触发客户端扫码
			$(".strong").text(5);
			scanningcode = "";
			window.postMessage(JSON.stringify({
				type:"scanning"
			}));
			$(".strong").text(6);
			//jeff end
        });
        $(".page-check-out .mid .col-sm-4 .img-wrap .add").unbind().click(function () {
            var price1 = jQuery(this).parents(".col-sm-4").attr('cost');
            var goods_id = jQuery(this).parents(".col-sm-4").attr('goods_id');
            count = parseInt(count) + 1;
            price = parseFloat(price) + parseFloat(price1);
            add_goods(goods_id);
            jQuery(".count span").html("X " + count + "份");

            if (String(price).indexOf(".") > -1) {
                jQuery(".half .right .strong").html("￥" + price)
                jQuery(".cost span").html("￥" + price);
            } else {
                jQuery(".half .right .strong").html("￥" + price + ".00")
                jQuery(".cost span").html("￥" + price + ".00");

            }
            jQuery(".half .right .small span").html(count);
        });
    }

    $(".sure").click(function () {
        price = jQuery('#custom-price').html();
        if (String(price).indexOf(".") > -1) {
            jQuery(".half .right .strong").html("￥" + price)
        } else {
            jQuery(".half .right .strong").html("￥" + price + ".00")
        }
        jQuery(".half .right .small span").html("1")
        check.slideTo(2, 100, false);
        //					startRecognize();

        //jeff begin
		//屏蔽
		//start(function(qrcode){app.pay(qrcode)});
		//触发客户端扫码
		$(".strong").text(1);
		scanningcode = "";
		window.postMessage(JSON.stringify({
			type:"scanning"
		}));
		$(".strong").text(2);
		//jeff end
    });
    $(".sure2").click(function () {
        check.slideTo(2, 100, false);
        //					startRecognize();


        //jeff begin
		//屏蔽
		//start(function(qrcode){app.pay(qrcode)});
		//触发客户端扫码
		$(".strong").text(3);
		scanningcode = "";
		window.postMessage(JSON.stringify({
			type:"scanning"
		}));
		$(".strong").text(4);
		//jeff end
    });
    //         	});

    //      function startRecognize(){  //开启扫描
    //         try{
    //            var filter;
    //           //自定义的扫描控件样式
    //
    //          scan = new plus.barcode.Barcode('bcid',filter);
    //          scan.onmarked = onmarked;
    //          scan.onerror = onerror;  //扫描错误
    //          scan.start();
    //
    //        }catch(e){
    //          alert("出现错误啦:\n"+e);
    //           }
    //        };
    //          function onerror(e){  //错误弹框
    //                  alert(e);
    //                  scan.start();
    //          };
    //          function onmarked( type, result ) {  //这个是扫描二维码的回调函数，type是扫描二维码回调的类型
    //                  var text = '';
    //                  switch(type){ //QR,EAN13,EAN8都是二维码的一种编码格式,result是返回的结果
    //                      case plus.barcode.QR:
    //                      text = 'QR: ';
    //                      break;
    //                      case plus.barcode.EAN13:
    //                      text = 'EAN13: ';
    //                      break;
    //                      case plus.barcode.EAN8:
    //                      text = 'EAN8: ';
    //                      break;
    //                  }
    //                  alert( text + " : "+ result );
    //                  scan.start();
    //
    //          };
    function plusReady() {
        plus.device.setWakelock(true);
        jQuery('#uuid').val("UUID: " + plus.device.uuid);
    }

    if (window.plus) {
        plusReady();
    } else {
        document.addEventListener("plusready", plusReady, false);
    }
    jQuery(".set").click(function () {
        jQuery(".modal.password").show();
    });
    jQuery(".button-cancel").click(function () {
        jQuery(this).parents('.modal').hide();
    });
    jQuery(".button-sure").click(function () {
        jQuery(this).parents('.modal').hide();
        if (jQuery(this).parents('.modal').hasClass("password")) {
            var password = jQuery(this).parents('.modal').find('input').val();
            if (password == "1") {
                jQuery(".modal.set-modal").show();
            }
        } else {
            var uuid = $('#uuid').val();
            var counter_number = $('#counter_number').val();
            var terminal_number = $('#terminal_number').val();
            var loop = $('#loop').val();

            var host = $('#host').val();
            app.bind(uuid, counter_number, terminal_number, loop, host);
        }
    });

    var height = jQuery(window).height();
    var width = jQuery(window).width() * 0.63;
    $(".swiper-slide-1").css('height', height);
    $(".page-check-out .mid").css('height', height - width);
    var check = new Swiper('.page-check-out-swiper', {
        effect: 'fade',
        //autoplay: 3000,
        speed: 0,
        initialSlide: 1,
        noSwiping: true,
    });
    $(".jump").click(function () {
        price = '0';
        count = '0';
        goods = {};
        jQuery(".count span").html("X " + count + "份");
        jQuery(".cost span").html("￥" + price + ".00")
        check.slideTo(1, 100, false);
    });
    $(".jump2").click(function () {
        price = '0';
        count = '0';
        goods = {};
        jQuery('#custom-price').html('');
        check.slideTo(0, 100, false);
    });
    $(".sure").click(function () {
        price = jQuery('#custom-price').html();
        if (String(price).indexOf(".") > -1) {
            jQuery(".half .right .strong").html("￥" + price)
        } else {
            jQuery(".half .right .strong").html("￥" + price + ".00")

        }

        jQuery(".half .right .small span").html("1")
        check.slideTo(2, 100, false);
    });
    $(".sure2").click(function () {
        check.slideTo(2, 100, false);
    });
    $(".cancel").click(function () {
        price = '0';
        count = '0';
        jQuery(".count span").html("X " + count + "份");
        jQuery(".cost span").html("￥" + price + ".00")
        jQuery(".half .right .strong").html("￥" + price + ".00");
        jQuery(".half .right .small span").html(count);
        jQuery('#custom-price').html('');
        check.slideTo(1, 100, false);
        stop();
    });
    fun_click_goods();
    var mid = new Swiper('.mid-swiper', {
        nextButton: '.mid-next',
        prevButton: '.mid-prv',
        noSwiping: true,
        speed: 300,
        pagination: '.swiper-pagination',
    });
</script>
</body>

</html>